<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        li{
            list-style: none;
            float: left;
            text-align: center;
            border-left: 1px dashed orange;
            border-bottom: 1px dashed orange;
            height: 30px;
            line-height: 30px;
        }
        ul{
            padding: 0;
            margin: 0;
        }
        ul::after{
            content: '';
            display: block;
            clear: both;
        }
        ul > li:nth-child(1){
            width: 70px;
        }
        ul > li:nth-child(2){
            width: 150px;
        }
        ul > li:nth-child(3){
            width: 150px;
        }
        ul > li:nth-child(4){
            width: 150px;
            border-right: 1px dashed orange;
        }
        .header > li{
            background-color: rgba(255, 166, 0, 0.568);
        }
        span{
            color: purple;
            text-decoration: underline;
            cursor: pointer;
        }
        span:hover{
            color: blue;
        }
        #app{
            margin-left: 100px;
        }
        .input{
            height: 30px;
            margin-left: 12px;
            display: inline-block;
        }
        .wrapper{
            height: 30px;
            width: 525px;
            background-color: rgba(255, 166, 0, 0.568);
            border-bottom: 1px solid #bbb;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="wrapper">
            <div class="input">
                编号：<input type="text" v-model="addId" :disabled="judge" v-focus>
            </div>
            <div class="input">
                名称：<input type="text" v-model="addBook">
            </div>
            <button @click="appendBook" :disabled="flag">提交</button>
        </div>
        
        
        <ul class="header">
           <li>编号</li>
           <li>名称</li>
           <li>时间</li>
           <li>操作</li> 
        </ul>
        <ul :key="item.id" v-for="(item,index) in book">
            <li>{{ item.id }}</li>
            <li>{{ item.name }}</li>
            <li>{{ item.time }}</li>
            <li>
                <span @click="changeData(index)">修改</span> |
                <span @click="deleteData(index)">删除</span>
            </li>
        </ul>
        总本数：{{ total }}
    </div>


    <script>
        Vue.directive('focus',{
            inserted: function(el){
                el.focus();
            }
        })
        var vm = new Vue({
           el: '#app',
           data: {
                flag: false,
                judge: false,
                addId: '',
                addBook: '',
                book: [{
                    id: 1,
                    name: '圣经',
                    time: '2020-07-09'
                },{
                    id: 2,
                    name: '三体',
                    time: '2020-07-09'
                },{
                    id: 3,
                    name: '10分钟学会vue',
                    time: '2020-07-09'
                }]
           },
           computed: {
               total: function(){
                   return this.book.length;
               }
           },
           methods: {
                appendBook: function(){
                    if(this.judge == true){
                        this.book.some((item) => {
                            if(item.id == this.addId){
                                item.name = this.addBook;
                                return true;
                            }
                        })
                    }else{
                        var flag = this.book.some((item) => {
                                        return this.addId == item.id;
                                    })
                        if(flag){
                            alert('请输入正确形式的编号！');
                        }else{
                            this.book.push({
                                id: parseInt(this.addId),
                                name: this.addBook,
                                time: ''
                            });
                        }
                    }
                    this.judge = false;
                    this.addId = '';
                    this.addBook = '';
                },
                changeData: function(index){
                    this.addId = this.book[index].id;
                    this.addBook = this.book[index].name;
                    this.judge = true;
                },
                deleteData: function(index){
                    this.book.pop(this.book[index]);
                }
            },
            watch: {
                addBook: function(val){
                    var flag = this.book.some((item) => {
                        return item.name == val;
                    });
                    if(flag){
                        this.flag = true;
                    }else{
                        this.flag = false;
                    }
                }
            }
        });
    </script>
</body>
</html>